/**
 * 用户编辑简介的页面，四部分
 *      一、一张背景图片，中间有一张个人的头像
 *      二、编辑用户名
 *      三、编辑自己的介绍
 *      四、提交按钮
 */
import React, {Component} from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  Dimensions,
  Button,
  Image,
  ScrollView,
} from 'react-native';
import TopPicture from '../components/TopPicture';

import ImagePicker from 'react-native-image-crop-picker';
import {editMsg, _updataPicture} from '../../api/index';
import {connect} from 'react-redux';
import {setToastMsg, setHomeData} from '../../actions/index';

const {width} = Dimensions.get('window');

class EditUserIntroduction extends Component {
  constructor(props) {
    super(props);
    const param = this.props.navigation.getParam('originData');
    this.state = {
      nickname: param.nickname,
      remark: param.remark,
      portraitkey: param.portraitkey,
    };
  }
  async updatePic() {
    let param2 = {
      files: {
        uri: 'file://' + this.state.portraitkey,
        type: 'multipart/form-data',
        name: this.state.portraitkey.substr(
          this.state.portraitkey.lastIndexOf('/') + 1,
        ),
      },
    };
    let result = await _updataPicture(param2);
    //todo 得改成上传成功
    this.props.setToastMsg('上传成功！');
    this.props.setHomeData({img: this.state.portraitkey});
  }
  async send() {
    let param1 = {nickname: this.state.nickname, remark: this.state.remark};
    let result = await editMsg(param1);

    if (result.error_code === '0' || result.error_code === 0) {
      this.props.navigation.state.params.callback(this.state);
      this.props.navigation.navigate('UserInfo');
    }
  }
  selectPic() {
    ImagePicker.openPicker({multiple: false}).then(image => {
      this.setState({
        portraitkey: image.path,
      });
      this.updatePic();
    });
  }
  render() {
    return (
      <ScrollView style={{backgroundColor: '#ffffff'}}>
        <TopPicture
          onPressFunc={() => this.selectPic()}
          disableClick={false}
          uri={this.props.img}
        />
        <View style={styles.container}>
          <Text style={styles.textDesc}>用户名</Text>
          <TextInput
            style={styles.inputText}
            value={this.state.nickname}
            onChangeText={text => {
              this.setState({
                nickname: text,
              });
            }}
          />
        </View>
        <TextInput
          value={this.state.remark}
          style={styles.textIntroduction}
          multiline={true}
          onChangeText={text => this.setState({remark: text})}
        />
        <View style={styles.submitButton}>
          <Button title={'提 交'} onPress={() => this.send()} />
        </View>
      </ScrollView>
    );
  }
}

export default connect(
  state => ({
    img: state.home.img,
  }),
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
    setHomeData: data => dispatch(setHomeData(data)),
  }),
)(EditUserIntroduction);

const styles = StyleSheet.create({
  textName: {
    marginTop: 30,
    width: 375 - 40,
    marginLeft: 20,
    backgroundColor: '#F8F6F9',
  },
  textIntroduction: {
    marginTop: 25,
    width: 375 - 40,
    height: 200,
    marginLeft: 20,
    backgroundColor: '#F8F6F9',
    textAlignVertical: 'top',
  },
  submitButton: {
    marginTop: 20,
    width: 375 - 40,
    marginLeft: 20,
  },
  container: {
    width: 375 - 40,
    height: 40,
    backgroundColor: '#F8F6F9',
    marginTop: 10,
    marginLeft: 20,
    flexDirection: 'row',
  },
  textDesc: {
    width: 80,
    color: '#656565',
    marginLeft: 20,
    marginTop: 10,
    fontSize: 15,
  },
  inputText: {
    width: (375 - 40) / 2,
    backgroundColor: '#F8F6F9',
    marginLeft: 50,
  },
});
